<template>
	<div>
		<breadcrumb></breadcrumb>
		<div class="titleBox">
			<!-- icon-dingdan -->
			<div class="iconfontcolor icon-dingdan"></div>
			<div class="infoBox">
				<div class="info_line1">
					<h3 class="tit">收款单{{ result.steelNumber }}</h3>
					<div class="tag" v-if="result.steelState == 1">已结算</div>
					<div class="tag" style="background-color: #fffce8; color: #f8b030" v-else>
						待结算
					</div>
				</div>
				<div class="info_line2">
					<div style="margin-right: 15px">
						创建时间：{{ result.createTime }}
					</div>
				</div>
			</div>
			<div class="feeGroup" v-if="result.steelState == 1">
				<div class="feeBox">
					<div class="intervalLine"></div>
					<div class="feeItem">
						<div class="tit">货主金额</div>
						<div class="price">{{ result.orderAmount }}</div>
					</div>
				</div>
				<div class="feeBox">
					<div class="intervalLine"></div>
					<div class="feeItem">
						<div class="tit">结算金额</div>
						<div class="price" style="color: #1890ff">
							{{ result.payAmount }}
						</div>
					</div>
				</div>
			</div>

			<button class="examineBtn" @click="isShowDialog()" v-else>
				<span>结算</span>
			</button>
		</div>

		<div class="main">
			<div class="main_item">
				<titleVue :title="'基本信息'"></titleVue>
				<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#939393',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
					<el-descriptions-item label="项目名称">{{
            result.projectName
          }}</el-descriptions-item>
					<!--          <el-descriptions-item label="业务类型">{{-->
					<!--            result.steelType ? result.steelType.info : ""-->
					<!--          }}</el-descriptions-item>-->
					<el-descriptions-item label="计价方式">{{
            result.pricingMethod ? result.pricingMethod.info : ""
          }}</el-descriptions-item>
					<el-descriptions-item label="计量单位">{{
            result.measureUnit ? result.measureUnit.info : ""
          }}</el-descriptions-item>
					<el-descriptions-item label="运量">{{
            result.transportTotal
          }}</el-descriptions-item>
					<el-descriptions-item label="负责人">{{
            result.ownerName
          }}</el-descriptions-item>
					<el-descriptions-item label="联系电话">{{
            result.ownerPhone
          }}</el-descriptions-item>
				</el-descriptions>
			</div>
			<div class="main_item">
				<titleVue :title="'结算费用'"></titleVue>
				<el-descriptions border class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#262626',
          width: '120px',
          fontSize: '12px',
          fontWeight: 'bold',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
					<el-descriptions-item label="货主金额">{{
            result.counterparty==1?result.supplierMoney:result.orderAmount
          }}元</el-descriptions-item>
					<el-descriptions-item label="结算金额">{{
            result.payAmount + (result.payAmount > 0 ? "元" : "")
          }}</el-descriptions-item>
					<el-descriptions-item label="附件">
						<el-button v-if="result.fileUrls != '' && result.fileUrls != null" type="text" size="small"
							@click.native="goUrl(result.fileUrls)">点击查看附件</el-button>
						<div v-else>无</div>

					</el-descriptions-item>
				</el-descriptions>
			</div>
			<div class="main_item">
				<titleVue :title="'订单信息'"></titleVue>
				<div class="list">
					<el-table :data="result.driverBills" style="width: 100%" :header-cell-style="{
            height: '40px',
            backgroundColor: '#F5F5F5',
            color: '#262626',
            fontSize: '12px',
            padding: '0',
            fontweight: 'bold',
          }">
						<el-table-column align="center" prop="serialNumber" label="序号">
						</el-table-column>
						<el-table-column align="center" prop="orderStatusInfo" label="订单状态" width="70">
							<template slot-scope="scope">
								<!-- NEW( code: 1， info:"新订单") -->
								<div class="tag gery" v-if="scope.row.orderStatus.value == 1">
									<div class="dian"></div>
									<div class="text">未发布</div>
								</div>
								<!-- HANG_UP( code: 2， info:"挂起")，PAYING( code: 3， info:"等待付款")PAID( code: 4，info:"已付款") -->
								<div class="tag waitDispatch" v-if="scope.row.orderStatus.value == 4 ||
                  scope.row.orderStatus.value == 2 ||
                  scope.row.orderStatus.value == 3
                  ">
									<div class="dian"></div>
									<div class="text">未起运</div>
								</div>
								<div class="tag dispatched" v-if="scope.row.orderStatus.value == 5 ||
                  scope.row.orderStatus.value == 6
                  ">
									<!--  SHIPMENTING( code: 5,SHIPMENTED( code: 6info:"已发货")-->
									<div class="dian"></div>
									<div class="text">运输中</div>
								</div>
								<div class="tag dispatched" v-if="scope.row.orderStatus.value == 7">
									<div class="dian"></div>
									<!-- WAITING_PAY( code: 7，info:"等待到付") -->
									<div class="text">已送达</div>
								</div>
								<div class="tag dispatched" v-if="scope.row.orderStatus.value == 8 ||
                  scope.row.orderStatus.value == 9
                  ">
									<div class="dian"></div>
									<!-- TO_SIGN( code: 8，info:"待签收")，WAITING_RECEIPT( code: 9，info:"等待签收回单”) -->
									<div class="text">待签收</div>
								</div>
								<div class="tag complete" v-if="scope.row.orderStatus.value == 11 ||
                  scope.row.orderStatus.value == 10
                  ">
									<div class="dian"></div>
									<!-- COMPLETED( code: 11， info:"已完成") code:10 已签收 -->
									<div class="text">已完成</div>
								</div>
								<div class="tag Canceled" v-if="scope.row.orderStatus.value == 12">
									<!-- CANCEL( code: 12， info:"订单取消"]; -->
									<div class="dian"></div>
									<div class="text">已取消</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="waybillNo" label="订单编号" width="220">
						</el-table-column>
						<el-table-column align="center" prop="driverName" label="承运方">
						</el-table-column>
						<el-table-column align="center" prop="lineName" label="路线">
							<template slot-scope="scope">
								<div>{{ scope.row.lineName || '--.--' }}</div>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="cargoWeight" label="运量">
						</el-table-column>
						<el-table-column align="center" prop="measureUnit.info" label="计量单位">
						</el-table-column>
						<el-table-column align="center" prop="billAmount" label="司机运费">
							<template slot-scope="scope">
								<div>{{ scope.row.billAmount?scope.row.billAmount+'元':'--.--' }}</div>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="waybillTime" label="创建时间" sortable>
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template slot-scope="scope">
								<div>
									<el-button type="text" size="small"
										@click="routeToDetail(scope.row.waybillId)">详情</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<!--    <el-button type="text" size="small" @click="$router.push('/orderManagement/SettlementDoc/paymentOrderDetails/' + 4564)">测试详情</el-button>-->
		<el-dialog class="CollectionDialog" title="货主收款" :visible.sync="dialogVisible" width="400px">
			<el-form :model="CollectionForm" :rules="CollectionRules" ref="CollectionForm" label-width="100px"
				class="demoForm">
				<el-form-item label="应付金额" prop="payableAmount">
					<el-input v-model="CollectionForm.payableAmount" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="实付金额" prop="payAmount">
					<el-input v-model="CollectionForm.payAmount" onkeyup="value=value.replace(/[^\d.]/g,'')"
						:placeholder="'填入金额:'+CollectionForm.payableAmount">
						<template slot="suffix">
							<div class="inputBtn" @click="enterInput">填入</div>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="备注" prop="notes">
					<el-input type="textarea" resize="none" :rows="2" placeholder="请输入内容"
						v-model="CollectionForm.notes">
					</el-input>
				</el-form-item>

				<el-form-item label="上传附件" prop="signImage">
					<!-- action	必选参数，上传的地址 -->
					<!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
					<!-- on-remove	文件列表移除文件时的钩子 -->
					<!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->

					<!-- limit	最大允许上传个数 -->
					<!-- on-exceed	文件超出个数限制时的钩子 -->
					<!-- file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
					<el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
						:before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :on-success="onSuccess"
						:file-list="fileList" :headers="headers" v-model="CollectionForm.annex">
						<el-button size="small" class="uploadBtn" type="primary">选择文件</el-button>
						<span slot="tip" class="el-upload__tip">
							仅可上传一份合同文件，支持PDF、JPG等格式
						</span>
					</el-upload>
				</el-form-item>

				<el-form-item>
					<div class="BtnBox">
						<el-button class="Btn" @click="dialogVisible = false">取消</el-button>
						<el-button class="Btn" type="primary" @click="submitForm('CollectionForm')">确定</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import breadcrumb from "@/components/breadcrumb.vue";
	import titleVue from "@/components/titleVue";
	import httpApi from "@/http";
	import BASEURL from "@/http/BaseUrl";
	export default {
		data() {
			let validatePayRule = (rule, value, callback) => {
				let regular = /^([1-9]\d*(\.\d*[1-9][0-9])?)|^(0\.\d*[1-9][0-9])$|^(0\.\d*[1-9])$/
				if (value == '') {
					callback(new Error('金额不能为空'))
				} else if (value.split('.').length > 2) {
					callback('只能有一个小数点')
				} else if (!regular.test(value)) {
					callback(new Error('请输入正确面额金额'))
				} else {
					callback()
				}
			};
			return {
				result: {},
				fileList: [], //上传文件
				activeName: "first",
				dialogVisible: false,
				oderState: "0", //假数据 核算状态
				records: [],
				CollectionForm: {
					notes: "",
					payableAmount: "",
					payAmount: "",
					annex: "",
				},
				CollectionRules: {
					payAmount: [{
						validator: validatePayRule,
						trigger: "blur",
					}],
					notes: [{
						max: 30,
						message: "最大30个字符",
						trigger: "blur"
					}],
				},
				headers: {
					Authorization: localStorage.getItem("token"),
				},
				url: BASEURL.TCHYURL + "/file/upload",
			};
		},
		created() {
			////console.log();
		},
		methods: {
			enterInput() {
				this.CollectionForm.payAmount = this.CollectionForm.payableAmount
				this.$refs["CollectionForm"].clearValidate("payAmount");

			},
			routeToDetail(id) {
				////console.log("运单ID=", id);
				this.$router.push("/home/receiptDetailsWayBill/" + id);
			},
			async initDetails() {
				let res = await httpApi.selfOperatedSettlementApi.getReceiptDetail({
					fleetSteelOrderId: this.$route.params.id,
				});
				if (res.data.code == 200) {
					this.result = res.data.data;
					this.CollectionForm.fleetSteelOrderId = res.data.data.fleetSteelOrderId;
					this.CollectionForm.payableAmount = res.data.data.supplierMoney;
					this.getSerialNumber(this.result.driverBills);
				}
				////console.log("详情数据", res.data.data);
			},
			goUrl(url) {
				window.open(url, "_blank");
			},

			isShowDialog() {
				this.dialogVisible = true;
			},
			submitForm(CollectionForm) {
				this.$refs[CollectionForm].validate((valid) => {
					if (valid) {
						let params = {
							payAmount: this.CollectionForm.payAmount,
							fleetSteelOrderId: this.CollectionForm.fleetSteelOrderId,
							remark: this.CollectionForm.notes,
							fileUrls: this.CollectionForm.annex,
						};
						httpApi.selfOperatedSettlementApi
							.selectCollection(params)
							.then((res) => {
								if (res.data.code == 200) {
									this.$message.success("收款单结算成功");
									this.$router.go(0);
								} else {
									this.$message.error("收款单结算失败");
									return false;
								}
							});
					} else {
						////console.log("error submit!!");
						return false;
					}
				});
			},
			getSerialNumber(arr) {
				// 前端解决序号
				arr.forEach((item, i) => {
					let num = i + 1;
					item.serialNumber = num;
				});
			},
			handleRemove(file, fileList) {
				////console.log(file, fileList);
				this.fileList = [];
			},
			handlePreview(file) {
				////console.log(file, 3333);
			},
			handleExceed(files, fileList) {
				this.$message.warning(
					`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
				);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`);
			},
			onSuccess(response, file, fileList) {
				////console.log(response);
				this.CollectionForm.annex = response.data.url;
				this.fileList.push({
					name: response.data.name,
					url: this.response.data.url,
				});
			},
		},
		mounted() {
			this.initDetails();
		},
		components: {
			breadcrumb,
			titleVue,
		},
	};
</script>

<style lang="scss" scoped>
	.titleBox {
		flex: 1;
		background-color: #fff;
		height: 119px;
		display: flex;
		align-items: center;
		padding: 0 35px;
		margin-bottom: 9px;

		.feeGroup {
			margin-left: auto;
			display: flex;

			.feeBox {
				display: flex;
				width: 180px;
				align-items: center;

				.intervalLine {
					width: 2px;
					height: 64px;
					background-color: #f0f0f0;
					margin-right: 20px;
				}

				.feeItem {
					display: flex;
					flex-direction: column;
					margin-right: 20px;

					.tit {
						color: #a3a3a3;
						font-size: 12px;
						margin-bottom: 14px;
					}

					.price {
						color: #262626;
						font-size: 18px;
						font-weight: Bold;
					}
				}
			}
		}

		.icon-dingdan {
			font-size: 43px;
			margin-right: 10px;
		}

		.infoBox {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.info_line1 {
				margin-bottom: 3px;
				display: flex;
				align-items: center;

				>.tit {
					font-size: 18px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					margin-right: 8px;
					color: #262626;
				}

				>.tag {
					background-color: #ecf5fe;
					border-radius: 4px;
					width: 54px;
					height: 20px;
					color: #1890ff;
					font-size: 10px;
					text-align: center;
					line-height: 20px;

				}
			}

			.info_line2 {
				display: flex;
				color: #939393;
				font-size: 12px;
			}
		}

		.examineBtn {
			background-color: #1890ff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			color: #ffffff;
			font-size: 12px;
			width: 80px;
			height: 36px;
			cursor: pointer;
			margin-left: auto;

			&:hover {
				opacity: 0.8;
				transition: 0.2s;
			}
		}
	}

	.main {
		padding: 35px;
		min-height: calc(100vh - 255px);
		background-color: #fff;

		.main_item {
			margin-bottom: 40px;

			.list {
				border: 1px solid #f0f0f0;

				.tag {
					width: 63px;
					height: 28px;
					font-size: 12px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 4px;
					margin: 0 auto;

					.dian {
						width: 4px;
						height: 4px;
						border-radius: 50%;
						margin-right: 4px;
					}

					// 待派车标签 样式
					&.waitDispatch {
						background-color: #fffce8;
						color: #f9aa0d;

						.dian {
							background-color: #f9aa0d;
						}
					}

					&.gery {
						background-color: #f7f8f8;
						color: #a8b0b6;

						.dian {
							background-color: #a8b0b6;
						}
					}

					//已派车 和运输中 样式
					&.dispatched {
						background-color: #ecf5fe;
						color: #1890ff;

						.dian {
							background-color: #1890ff;
						}
					}

					//已完成
					&.complete {
						background-color: #ebfef5;
						color: #1acb7a;

						.dian {
							background-color: #1acb7a;
						}
					}

					//已取消
					&.Canceled {
						background-color: #fde8e9;
						color: #f5222d;

						.dian {
							background-color: #f5222d;
						}
					}
				}

				.routeBox {
					display: flex;
				}
			}
		}
	}

	.CollectionDialog {
		::v-deep .el-dialog__header {
			border-bottom: 1px solid #f0f0f0;
			color: #262626;
			font-size: 14px;
			font-weight: bold;
			padding: 0 20px 0px;
			height: 50px;
			line-height: 50px;
		}

		.inputBtn {
			cursor: pointer;
			transition: 0.2;
			font-size: 12px;
			padding: 0 8px;
			color: #1890ff;

			&:hover {
				opacity: 0.8;
			}
		}

		::v-deep .el-form-item__label {
			color: #262626;
			font-size: 12px;
			line-height: 32px;
		}

		::v-deep .el-input__inner {
			line-height: 32px;
			height: 32px;
		}

		::v-deep .el-dialog__body {
			padding: 25px 34px 24px 29px;
		}

		.BtnBox {
			display: flex;
			justify-content: flex-end;

			.Btn {
				height: 36px;
				width: 80px;
				font-size: 12px;
			}
		}

		// 上传文件
		.upload {
			.uploadBtn {
				width: 80px;
				height: 32px;
				background-color: #1890ff;
				font-size: 12px;
				color: #fff;
				cursor: pointer;
				border-radius: 4px;
				transition: 0.2s;
				margin-right: 12px;
				margin-bottom: 8px;

				&:hover {
					opacity: 0.8;
				}
			}

			.el-upload__tip {
				color: #cccccc;
				font-size: 12px;
			}

			::v-deep .el-upload-list {
				background-color: #eef3f9;
			}
		}
	}
</style>